/*
 * @Description: 事件处理
 * @Author: rendc
 * @Date: 2021-10-13 09:34:40
 * @LastEditors: rendc
 * @LastEditTime: 2021-10-14 10:26:07
 */
import React from 'react';
import ReactDOM from 'react-dom';

// class 开关组件
class Toggle extends React.Component {
  constructor(props) {
    super(props);
    // 在constructor中设置state
    this.state = {
      flag: true,
      str: "hello"
    };
    // 绑定this
    // this.handleClick = this.handleClick.bind(this);
  }
  // 点击事件
  handleClick () {
    console.log(this);
    console.log(this.state);
    // 更改state的方式
    this.setState(state => ({
      flag: !state.flag,
    }));
  }
  // 根据id删除
  deleteById (id, e) {
    console.log("删除" + id)
    console.log("事件对象")
    console.log(e);
  }
  // 组件的UI
  render () {
    return (
      <div>
        {/* 事件绑定 obClick（小驼峰命名方式） 绑定事件不能给字符串 要绑定函数 {this.handleClick} */}
        <button onClick={() => this.handleClick()}>
          {this.state.str}+按钮：{this.state.flag ? "开" : "关"}
        </button>
        {/* 参数传递1 */}
        <br />
        {/* 通过箭头函数传递参数要显示的传递e 否则不可用 */}
        <button onClick={(e) => this.deleteById(9, e)}>
          删除按钮1
        </button>
        {/* 参数传递2 */}
        <br />
        {/* 通过bind传递参数要 e会隐式的进行传递 */}
        <button onClick={this.deleteById.bind(this, 10)}>
          删除按钮2
        </button>
      </div>
    )
  }
}
// 将组件渲染到页面上
ReactDOM.render(<Toggle />, document.getElementById('root'));

// 条件渲染
// // 用户已登录
// function UserGreeting (props) {
//   return <h1>欢迎登录,{props.user.name}</h1>;
// }
// // 用户未登录
// function GuestGreeting (props) {
//   return <h1>亲，请登录</h1>;
// }
// // 判断显示哪个组件
// function Greeting (props) {
//   const { user } = props;
//   if (user) {
//     return <UserGreeting user={user} />;
//   }
//   return <GuestGreeting />;
// }
// ReactDOM.render(
//   <Greeting user={{ "id": 1, "name": "briup" }} />,
//   document.getElementById('root')
// );

function UserGreeting (props) {
  return <h1>欢迎登录</h1>;
}
function GuestGreeting (props) {
  return <h1>请登录。</h1>;
}
function Greeting (props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
function LoginButton (props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}
function LogoutButton (props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = { isLoggedIn: false };
  }
  handleLoginClick () {
    this.setState({ isLoggedIn: true });
  }
  handleLogoutClick () {
    this.setState({ isLoggedIn: false });
  }
  render () {
    const isLoggedIn = this.state.isLoggedIn;
    let button;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('root')
);


function Mailbox (props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {/* 
      因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。
      因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
      */}
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);


// const numbers = [1, 2, 3, 4, 5];
// const listItems = numbers.map((number) =>
//   <li>{number}</li>
// );

// ReactDOM.render(
//   <ul>{listItems}</ul>,
//   document.getElementById('root')
// );


const user = [
  { id: 1, name: "zhangsan" },
  { id: 2, name: "lisi" },
  { id: 3, name: "wangwu" },
  { id: 4, name: "larry" },
  { id: 5, name: "terry" }];
const userItems = user.map((user) =>
  <li key={user.id}> {user.name}</li>
);

ReactDOM.render(
  <ul>{userItems}</ul>,
  document.getElementById('root')
);

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange (event) {
    console.log("input-onchange" + event.target.value);
    this.setState({ value: event.target.value });
  }
  handleSubmit (event) {
    alert('提交的名字: ' + this.state.value);
    event.preventDefault();
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: ['grapefruit', 'lime'] };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange (event) {
    console.log(event.target.value);
    this.setState({ value: event.target.value });
  }
  handleSubmit (event) {
    alert('你喜欢的风味是: ' + this.state.value);
    event.preventDefault();
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          选择你喜欢的风味:
          <select multiple={true} value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">葡萄柚</option>
            <option value="lime">酸橙</option>
            <option value="coconut">椰子</option>
            <option value="mango">芒果</option>
          </select>
        </label>
        <input type="submit" value="提交" />
      </form>
    );
  }
}
ReactDOM.render(
  // <NameForm />,
  <FlavorForm />,
  document.getElementById('root')
);